<script src="<?php echo(JS_LIBS);?>jquery-wizard/jquery.easyWizard.js"></script>

				<div class="page-heading">
            		<h1><i class="fa fa-user"></i> Nou usuari</h1>
            	</div>
            	<!-- Page Heading End-->				
				<div class="row">
					<div class="col-md-12 portlets ui-sortable">
						<!-- Your awesome content goes here -->
						<div class="widget animated fadeInDown">
							<form id="form_crear_usuario" class="easyWizardElement easyPager" style="position:relative; overflow:hidden;">
								<section data-step-title="Dades" class="step active" style="float: left; width: 1623px;" data-step="1">
									<div class="col-md-12">
										<div class="col-md-4">
											<div class="form-group">
												<label for="inputEmail">Nom/Cognoms</label>
												<input type="text" class="form-control" id="nom" maxlength="50">
												<p class="help-block">Max <i id="max_nom">50</i> caràcters</p>
											</div>
										</div>
										<div class="col-md-6"></div>
									</div>
									<div class="col-md-12">
										<div class="col-md-4">
											<div class="form-group">
												<label for="inputPassword">Usuari</label>
												<input type="text" class="form-control" id="usuari" maxlength="50">
												<p class="help-block">Max <i id="max_usuari">50</i> caràcters</p>
 											</div>
										</div>
										<div class="col-md-6"></div>
									</div>
									<div class="col-md-12">
										<div class="col-md-4">
											<div class="form-group">
												<label >Clau</label>
												<input type="password" class="form-control"  id="password" maxlength="25">
												<p class="help-block">Max <i id="max_password">25</i> caràcters</p>
											</div>
										</div>
										<div class="col-md-4">
											<div class="form-group">
												<label>Repetir Clau</label>
												<input type="password" class="form-control" id="rep_password" maxlength="25">
												<p class="help-block">Max <i id="max_rep_password">25</i> caràcters</p>
											</div>
										</div>
									</div>
									<div class="col-md-12">
										<div class="col-md-4">
											<div class="form-group">
												<label >E-mail</label>
												<input type="email" class="form-control"  id="email" maxlength="50">
												<p class="help-block">Max <i id="max_email">50</i> caràcters</p>
											</div>
										</div>
										<div class="col-md-4">
											<div class="form-group">
												<label>Repetir E-mail</label>
												<input type="email" class="form-control"  id="rep_email" maxlength="50">
												<p class="help-block">Max <i id="max_rep_email">50</i> caràcters</p>
											</div>
										</div>
									</div>
								</section>
								<section data-step-title="Perfil" class="step" style="float: left; width: 1623px; height: 1px;" data-step="2">
									<div class="col-md-12">
										<div class="col-md-4">
											<div class="form-group">
												<label>Sel·lecionar perfil usuari</label>
												<select id="perfiles_usuario" class="form-control">

												</select>
										 	 </div>
										</div>
									</div>
									<div class="col-md-12">
										<div class="col-md-4">
											  <div class="form-group">
												<label>Definir nou perfil d'usuari</label>
												<input type=text" id="nuevo_perfil" class="form-control">
											  </div>
										</div>
										<div class="col-md-6">
											  <a data-modal="form-modal" class="btn btn-success md-trigger" style="margin-top:25px;">Crear </a>
										</div>
									</div>
								</section>
								<section data-step-title="Confirmar" class="step" style="float: left; width: 1623px; height: 1px;" data-step="3">
									<div class="row">
										<div class="col-sm-12">
											<div class="notes">
												<h4><strong>Example</strong> note</h4>
												<p style="text-align: justify">
												Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
												</p>
												<ol>
													<li>Duis autem vel eum iriure dolor in hendrerit in vulputate</li>
													<li>Lorem ipsum dolor sit amet</li>
													<li>Sed diam nonummy nibh euismod tincidunt</li>
													<li>Sonsectetuer adipiscing elit</li>
													<li>Tincidunt ut laoreet dolore magna aliquam erat volutpat</li>
												</ol>
												<p style="text-align: justify">
												Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
												</p>
												 <a href="javascript:validarForm();" class="btn btn-success md-trigger" style="width:200px; height:50px; margin-top:25px; font-size:15px; padding-top:15px; margin-left: 30%;" >CREAR USUARIO </a>
											</div>
										</div>
									</div>
								</section>
								

							</div>
						</form>
					</div>
				</div>
			</div>
<script>

$(document).keydown(function(objEvent) {
    if (objEvent.keyCode == 9) {  //tab pressed
        objEvent.preventDefault(); // stops its action
    }
});

$(function() {


	initForm();
	initContadores();
	listarPerfilesUsuario();
	
	  
});


function initForm(){
	$('#form_crear_usuario').easyWizard({
		buttonsClass: 'btn btn-default',
		submitButton: false,
		beforeSubmit:function(wizardObj) {
			validarForm();
		}
	});
}

function initContadores(){
	contador('nom','50','max_nom');
	contador('usuari','50','max_usuari');
	contador('password','25','max_password');
	contador('rep_password','25','max_rep_password');
	contador('email','50','max_email');
	contador('rep_email','50','max_rep_email');
}

function listarPerfilesUsuario(){
	$.getJSON(url_base+"listado-perfiles-usuario", function( data ) {
		$.each( data, function( key, val ) {
			 $("#perfiles_usuario").append("<option value='"+val.cod_perfil+"'>"+val.perfil+"</option>");
		});

	});
	//perfiles_usuario
	//listado-perfiles-usuario
}

function validarForm(){
	var info = {};
	info.nom = $("#nom").val();
	info.usuario = $("#usuari").val();
	info.password = $("#password").val();
	info.rep_password = $("#rep_password").val();
	info.email = $("#email").val();
	info.rep_email = $("#rep_email").val();
	info.perfil_usuario = $("#perfiles_usuario").val();

	if(isEmpty(info.nom)){alert('Nombre en blanco'); moverPagina(1); return;}
	if(isEmpty(info.usuario)){alert('Usuario en blanco'); moverPagina(1); return;}
	if(info.password != info.rep_password || isEmpty(info.password) == true || isEmpty(info.rep_password) == true){ alert('Contraseña no valida.Introducir de nuevo'); moverPagina(1); return;}
	if(!comprobarEmail(info.email)){ alert('Email no correcto'); moverPagina(1); return;}
	if(!comprobarEmail(info.rep_email)){ alert('Repeticion email no correcto'); moverPagina(1); return;}

	$.ajax({
        type: "post",
        data:info,
        url: url_base+"crear-nuevo-usuario",
        success: function(data){
            if(data == 'true'){
				alert("Usuario creado correctamente");
            }else{
            	 alert(data);
            }
	        
        }
    });
	
}


function moverPagina(num){
	$('#form_crear_usuario').easyWizard('goToStep',num);
}








</script>